<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>菜单管理</span>
          <el-button type="primary" @click="handleAdd">新增菜单</el-button>
        </div>
      </template>

      <!-- 菜单树形表格 -->
      <el-table :data="menuList" style="width: 100%" row-key="id" border default-expand-all>
        <el-table-column prop="name" label="菜单名称" />
        <el-table-column prop="icon" label="图标" width="100">
          <template #default="scope">
            <el-icon v-if="scope.row.icon">
              <component :is="scope.row.icon" />
            </el-icon>
          </template>
        </el-table-column>
        <el-table-column prop="path" label="路由路径" />
        <el-table-column prop="component" label="组件路径" />
        <el-table-column prop="sort" label="排序" width="80" />
        <el-table-column prop="status" label="状态" width="80">
          <template #default="scope">
            <el-tag :type="scope.row.status === '1' ? 'success' : 'danger'">
              {{ scope.row.status === '1' ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button size="small" @click="handleAddChild(scope.row)">新增</el-button>
            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 菜单编辑/新增对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="600px"
      @close="handleDialogClose"
    >
      <el-form ref="menuFormRef" :model="menuForm" :rules="menuFormRules" label-width="100px">
        <el-form-item label="上级菜单" prop="parentId">
          <el-tree-select
            v-model="menuForm.parentId"
            :data="menuOptions"
            :props="{ value: 'id', label: 'name', children: 'children' }"
            node-key="id"
            placeholder="请选择上级菜单"
            check-strictly
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="菜单类型" prop="type">
          <el-radio-group v-model="menuForm.type">
            <el-radio :label="1">目录</el-radio>
            <el-radio :label="2">菜单</el-radio>
            <el-radio :label="3">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="menuForm.name" />
        </el-form-item>
        <el-form-item label="路由路径" prop="path">
          <el-input v-model="menuForm.path" />
        </el-form-item>
        <el-form-item v-if="menuForm.type !== 3" label="组件路径" prop="component">
          <el-input v-model="menuForm.component" placeholder="例如: /system/user/index" />
        </el-form-item>
        <el-form-item label="菜单图标" prop="icon">
          <el-input v-model="menuForm.icon" placeholder="例如: Setting" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="menuForm.sort" :min="0" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="menuForm.status">
            <el-radio label="1">启用</el-radio>
            <el-radio label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 菜单列表数据
const menuList = ref([
  {
    id: 1,
    name: '系统管理',
    icon: 'Setting',
    path: '/system',
    component: 'Layout',
    sort: 1,
    status: '1',
    children: [
      {
        id: 2,
        parentId: 1,
        name: '用户管理',
        icon: 'User',
        path: '/system/user',
        component: '/system/user/index',
        sort: 1,
        status: '1'
      },
      {
        id: 3,
        parentId: 1,
        name: '角色管理',
        icon: 'Lock',
        path: '/system/role',
        component: '/system/role/index',
        sort: 2,
        status: '1'
      },
      {
        id: 4,
        parentId: 1,
        name: '菜单管理',
        icon: 'Menu',
        path: '/system/menu',
        component: '/system/menu/index',
        sort: 3,
        status: '1'
      }
    ]
  }
])

// 菜单选项数据（用于上级菜单选择）
const menuOptions = ref([
  {
    id: 0,
    name: '顶级菜单',
    children: [
      {
        id: 1,
        name: '系统管理',
        children: [
          {
            id: 2,
            name: '用户管理'
          },
          {
            id: 3,
            name: '角色管理'
          },
          {
            id: 4,
            name: '菜单管理'
          }
        ]
      }
    ]
  }
])

// 对话框相关
const dialogVisible = ref(false)
const dialogTitle = ref('')
const isEdit = ref(false)

// 菜单表单
const menuForm = reactive({
  id: '',
  parentId: 0,
  type: 1,
  name: '',
  path: '',
  component: '',
  icon: '',
  sort: 0,
  status: '1'
})

// 表单验证规则
const menuFormRules = {
  name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
  path: [{ required: true, message: '请输入路由路径', trigger: 'blur' }]
}

// 表单引用
const menuFormRef = ref(null)

// 新增菜单
const handleAdd = () => {
  dialogTitle.value = '新增菜单'
  isEdit.value = false
  dialogVisible.value = true
}

// 新增子菜单
const handleAddChild = row => {
  dialogTitle.value = '新增菜单'
  isEdit.value = false
  menuForm.parentId = row.id
  dialogVisible.value = true
}

// 编辑菜单
const handleEdit = row => {
  dialogTitle.value = '编辑菜单'
  isEdit.value = true
  Object.assign(menuForm, row)
  dialogVisible.value = true
}

// 删除菜单
const handleDelete = row => {
  ElMessageBox.confirm(`确认删除菜单 "${row.name}" 吗？`, '确认删除', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      ElMessage.success('删除成功')
    })
    .catch(() => {
      ElMessage.info('已取消删除')
    })
}

// 提交表单
const submitForm = () => {
  menuFormRef.value.validate(valid => {
    if (valid) {
      if (isEdit.value) {
        ElMessage.success('菜单编辑成功')
      } else {
        ElMessage.success('菜单新增成功')
      }
      dialogVisible.value = false
    }
  })
}

// 关闭对话框
const handleDialogClose = () => {
  menuFormRef.value.resetFields()
  menuForm.parentId = 0
  menuForm.type = 1
  menuForm.sort = 0
  menuForm.status = '1'
}
</script>
